<template>
    <div>
        <el-row>
            <el-col :span="8" v-for="information in informations" :key="information.article_id"
                style="width:32%;margin-left:20px;margin-bottom:20px">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="information.url" class="image">
                    <div style="padding: 14px;" @click="informationDetail(information.article_id)">
                        <span>{{ information.title }}</span>
                        <div class="bottom clearfix">
                            点击量:<span>{{ information.hits }}</span>
                            点赞数:<span>{{ information.praise_len }}</span>
                            <span>
                                发布时间:<time class="time">{{ format(information.create_time).format }}</time>
                            </span>
                            <el-button type="text" class="button"
                                @click="informationDetail(information.article_id)">查看详情</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div style="margin-top:10px">
            <div class="block">
                <el-pagination :current-page="currentPage" :page-size="pageSize" layout="total,  prev, pager, next, jumper"
                    :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import dateTime from '@/utils/date_time';
export default {
    data() {
        return {
            informations: [],
            pageSize: 6,
            pagerCount: 0,
            total: 0,
            currentPage: 1,
        }
    },
    methods: {
        handleCurrentChange(val) {
            let that = this;
            axios.get('http://127.0.0.1:5000/api/article/get_list', {
                params: {
                    page: val,
                    size: that.pageSize
                }
            })
                .then(function (response) {
                    console.log(response.data.result);
                    that.informations = response.data.result.list;
                    that.total = Number.parseInt(response.data.result.count);
                    that.pagerCount = that.total % that.pageSize;
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        informationDetail(id) {
            this.$router.push({ name: 'information_detail', params: { article_id: id } }, () => { }, () => { });
        },
        format(create_time) {
            return dateTime.dateTime(create_time)
        }
    },
    created: function () {
        let that = this;
        axios.get('http://127.0.0.1:5000/api/article/get_list', {
            params: {
                page: 1,
                size: that.pageSize
            }
        })
            .then(function (response) {
                console.log(response.data.result);
                that.informations = response.data.result.list;
                that.total = Number.parseInt(response.data.result.count);
                that.pagerCount = that.total % that.pageSize;
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    }
}
</script>
<style lang="less" scoped>
.a {
    background-color: aliceblue;
}
</style>